import React, {Component} from 'react';
import {Grid,Button,Dialog,Input,Radio,NumberPicker,Switch,Feedback} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import MenuTree from '../MenuTree';
import SelectIcon from '../SelectIcon';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;
const { Group: RadioGroup } = Radio;

/**
* 添加菜单
*/
export default class AddMenu extends Component{
  constructor(props) {
     super(props);
     this.state = {
       visible: false,
       menu:{
         parent_id:0,
         type:"1",
         is_show:"1",
         sort:0
       }
     }
     this.setMenuParentId = this.setMenuParentId.bind(this);
  }

  onOpen = () => {
    //获取最大排序码
    let res = API.getMenuMaxSort({parent_id:0});
    this.state.menu.sort = res.result.sort;
    this.state.visible = true;
    this.setState(this.state);
  };

  onClose = () => {
    this.setState({
      visible: false,
      menu:{
        parent_id:0,
        type:"1",
        is_show:"1",
      }
    })
  };

  onOk = () => {
    this.refs.form.validateAll((errors, values) => {
      if(errors == null){
        //添加菜单
        API.saveMenu(this.state.menu).then((res) => {
          Feedback.toast.success("添加成功");
          this.onClose();
          //刷新列表
          this.props.reload();
        });
      }
    });
  }

  //设置父级id
  setMenuParentId(p_id){
    //获取最大排序码
    let res = API.getMenuMaxSort({parent_id:p_id});
    this.state.menu.parent_id = p_id;
    this.state.menu.sort = res.result.sort;
    this.setState(this.state);
  }

  render(){
    return(
      <span>
        <Button onClick={this.onOpen} type="primary"> + 添加菜单 </Button>
        <Dialog
          visible={this.state.visible}
          onOk={this.onOk}
          onCancel={this.onClose}
          onClose={this.onClose}
          title="新增菜单"
          className="add-user-dialog"
        >
          <IceFormBinderWrapper
            value={this.state.menu}
            ref="form">
              <Row wrap={true} justify='center'>
                <Col span='24'>
                  <MenuTree defaultVal={"0"} defaultLabel={"主目录"} renderFun={this.setMenuParentId} />
                </Col>
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">菜单类型：</Col>
                    <Col s='15' xxs='18' style={{paddingTop:8}}>
                      <IceFormBinder required={true} message={"不能为空"} name="type" >
                        <RadioGroup onChange = {(val)=>{
                            this.state.menu.type = val;
                            this.setState(this.state);
                          }}>
                          <Radio value={"1"} >目录</Radio>
                          <Radio value={"2"} >菜单</Radio>
                          <Radio value={"3"} >按钮</Radio>
                        </RadioGroup>
                      </IceFormBinder>
                      <div><IceFormError className="err" name="type" /></div>
                    </Col>
                  </Row>
                </Col>
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">菜单名称：</Col>
                    <Col s='15' xxs='18' >
                      <IceFormBinder required={true} message={"不能为空"} name="name" >
                        <Input />
                      </IceFormBinder>
                      <div><IceFormError className="err" name="name" /></div>
                    </Col>
                  </Row>
                </Col>
                {
                  this.state.menu.type != 3?
                    <Col span='24'>
                      <Row justify='center'>
                        <Col s='9' xxs='6' className="add-user-label">菜单标识：</Col>
                        <Col s='15' xxs='18' >
                          <IceFormBinder required={true} message={"不能为空"} name="label" >
                            <Input />
                          </IceFormBinder>
                          <div><IceFormError className="err" name="label" /></div>
                        </Col>
                      </Row>
                    </Col>
                  :null
                }
                {
                  this.state.menu.type == 2?
                    <Col span='24'>
                      <Row justify='center'>
                        <Col s='9' xxs='6' className="add-user-label">请求地址：</Col>
                        <Col s='15' xxs='18' >
                          <IceFormBinder name="href" >
                            <Input></Input>
                          </IceFormBinder>
                          <div><IceFormError className="err" name="href" /></div>
                        </Col>
                      </Row>
                    </Col>
                  :null
                }
                {
                  this.state.menu.type != 1?
                    <Col span='24'>
                      <Row justify='center'>
                        <Col s='9' xxs='6' className="add-user-label">权限标识：</Col>
                        <Col s='15' xxs='18' >
                          <IceFormBinder name="permission" >
                            <Input></Input>
                          </IceFormBinder>
                          <div><IceFormError className="err" name="permission" /></div>
                        </Col>
                      </Row>
                    </Col>
                  :null
                }
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">显示排序：</Col>
                    <Col s='15' xxs='18'>
                        <NumberPicker type="inline" min={0} onChange={(value)=>{
                            this.state.menu.sort = value
                            this.setState(this.state)
                          }} value={this.state.menu.sort}/>
                    </Col>
                  </Row>
                </Col>
                {
                  this.state.menu.type == 1?
                    <Col span='24'>
                        <SelectIcon icon={this.state.menu.icon} renderFun={(icon)=>{
                            this.state.menu.icon = icon;
                            this.setState(this.state);
                          }}/>
                    </Col>
                  :null
                }
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">是否显示：</Col>
                    <Col s='15' xxs='18' style={{paddingTop:5}}>
                      <Switch defaultChecked={this.state.menu.is_show == "1"?true:false}
                        onChange={(checked)=>{
                          this.state.menu.is_show = checked?1:0;
                          this.setState(this.state);
                        }}  size="small" />
                    </Col>
                  </Row>
                </Col>
              </Row>
         </IceFormBinderWrapper>
        </Dialog>
      </span>
    )
  }

}
